
//  toolist
import { useState } from 'react';
import '../css/toolist.css';
const Products = () => {
  const [tasks, setTasks] = useState([
    { id: 1, text: '运动', completed: true },
    { id: 2, text: '吃早餐', completed: true },
    { id: 3, text: '去书店', completed: false },
  ]);
  // 输入框临时内容
  const [inputText, setInputText] = useState('');
  const [filter, setFilter] = useState('all');
  // 控制显示还是不显示
  const filteredTasks = tasks.filter((task) => {
    if (filter === 'completed') return task.completed;
    if (filter === 'active') return !task.completed;
    return true;
  });
  // 输入框的事件
  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && inputText.trim() !== '') {
      const newTask = { id: tasks.length + 1, text: inputText, completed: false };
      // 添加任务
      setTasks([...tasks, newTask]);
      setInputText('');
    }
  };
  // 按键处理事件
  const clearCompletedTasks = () => {
    setTasks(tasks.filter((task) => !task.completed));
  };
  return (
    <div>
      <div className='toolist'>
        <input type="text"
          value={inputText}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
          placeholder="请输入你的任务名称,按回车建清除" />

        <ul className='list'>
          {filteredTasks.map((task) => (
            <li key={task.id}>
              <input type="checkbox" checked={task.completed} onChange={() => {
                setTasks(tasks.map((t) => (t.id === task.id ? { ...t, completed: !t.completed } : t)));
              }} />
              <span
                style={{
                  textDecoration: task.completed ? 'line-through' : 'none',
                }}>
                {task.text}
              </span>
            </li>
          ))}
        </ul>
        <div>
          <button onClick={() => setFilter('all')}>全部</button>
          <button onClick={() => setFilter('completed')}>已完成</button>
          <button onClick={() => setFilter('active')}>未完成</button>
          <button onClick={clearCompletedTasks}>清除已完成任务</button>
        </div>
      </div>
      <div>
        已完成
      </div>
    </div>
  );
};
export default Products;